<template>
  <div>
    <div>这是学生管理的页面~</div>
    <p></p>
    <button v-on:click="getAllStudents">获取所有学生</button>
    <div v-for="(student) in students" v-bind:key = student.id>
       {{student}}
    </div>
    <p></p>
      <span>请输入要查询的id:</span>
      <input v-model="queryId" type="text">
      <button v-on:click="getStudentById">获取id学生</button>
      <div>{{studentById}}</div>
    <p></p>
    学号：<input v-model="student_id" type="text">
    姓名：<input v-model="name" type="text">
    班级：<input v-model="classDemo" type="text">
    电话号码：<input v-model="telephone" type="text">
    qq：<input v-model="qq" type="text">
    <button @click="addStudent">添加学生</button>
    <p></p>
   <div>
     请输入要修改的学生信息：
     <div>
       id
    <input v-model="id">
     </div>
     <div>
       学号：
      <input v-model="student_id1">
     </div>
     <div>
       姓名：
      <input v-model="name1">
     </div>
     <div>
       班级：
       <input v-model="class1">
     </div>
     <div>
       电话号码：
       <input v-model="telephone1">
     </div>
     <div>
       qq：
       <input v-model="qq1">
     </div>
   </div>
   <button v-on:click="updateStudent">修改学生</button>
    <p></p>
    <span>请输入要删除的id:</span>
    <input v-model="deleteId" type="text">
    <button v-on:click="deleteStudentById">删除id用户</button>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "UserPage",
  data() {
    return {
      id: null,
      students: null,
      queryId:null,
      studentById:null,
      student_id:null,
      name:null,
      classDemo:null,
      telephone:null,
      qq:null,
      student_id1:null,
      name1:null,
      classDemo1:null,
      telephone1:null,
      qq1:null,
      deleteId:null
    }
  },
  methods: {
    getAllStudents() {
      axios.get("http://localhost:8081/students")
          .then(resp => {
            console.log(resp)
            this.students = resp.data
          })
    },
    getStudentById(){
      axios.get(`http://localhost:8081/student/${this.queryId}`)
          .then(resp => {
            console.log(resp)
            this.studentById = resp.data
          })
    },
    addStudent(){
      axios.post("http://localhost:8081/student",
          {
            studentId: this.student_id,
            name: this.name,
            classDemo: this.classDemo,
            telephone: this.telephone,
            qq: this.qq
          }).then(resp => {
        console.log(resp);
      })
    },
    updateStudent(){
      axios.put("http://localhost:8081/student",{
        id: this.id,
        studentId: this.student_id1,
        name: this.name1,
        classDemo: this.classDemo1,
        telephone: this.telephone1,
        qq: this.qq1
      }).then( resp => {
        console.log(resp);
      })
    },
    deleteStudentById(){
      axios.delete("http://localhost:8081/student",{
        params:{
          id: this.deleteId
        }
      }).then(resp =>{
        console.log(resp);
        this.deleteId=""
      })

    }
  }
}
</script>